<template>
  <div class="journal-part-5">
    <div class="part-title">Part V - {{ $t("btnText.task.part_5") }}</div>
    <div class="part-form">
      <a-form>
        <a-form-item :label="$t('form.task.part_5_form.item_1.label')">
          <a-textarea
            :maxlength="1000"
            @blur="onInputBlur"
            v-model:value.trim="partFiveData.content"
            autoSize
          ></a-textarea>
          <div class="tips">{{ $t("form.task.part_5_form.item_1.tip") }}</div>
        </a-form-item>
      </a-form>
    </div>
    <div class="footer-btn">
      <a-button @click="goto('/member/journal', { step: 4 })">{{
        $t("btnText.prev_step")
      }}</a-button>
      <a-button type="primary" @click="goto('/member/journal', { step: 6 })">{{
        $t("btnText.next_step")
      }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { postPartFiveView, postPartFiveUpdate } from "../../../../api/part";
import type { PartFive } from "../../../../types/part";
import { onBeforeMount } from "vue";
import { useMemberStore } from "../../../../store";

const partFiveData = ref<PartFive>({
  content: "",
});

const cacheFiveData: PartFive = {
  content: "",
};

const setCacheData = () => {
  cacheFiveData.content = partFiveData.value.content;
};

const getPartFiveData = async () => {
  let res = await postPartFiveView();
  if (res.code === 200) {
    res.data ? (partFiveData.value = res.data) : null;
    setCacheData();
  }
};

const onInputBlur = () => {
  if (cacheFiveData.content !== partFiveData.value.content) {
    updateFiveData();
  }
};

const updateFiveData = async () => {
  delete partFiveData.value.create_time;
  partFiveData.value.member_id = useMemberStore().profile?.id;
  let res = await postPartFiveUpdate(partFiveData.value);
  if (res.code === 200) {
    setCacheData();
  }
};

onBeforeMount(() => {
  getPartFiveData();
});
</script>
<style scoped lang="less">
@import url("./common.less");
.journal-part-5 {
  :deep(.part-form) {
    .ant-input {
      width: 1000px;
    }
  }
}

@media screen and (max-width: 768px) {
  .journal-part-5 {
    :deep(.part-form) {
      .ant-input {
        width: 100%;
      }
    }
  }
}
</style>
